<template>
  <div>
    <el-dialog :visible.sync="visible"
               title="特享VIP服务"
               width="50%"
               :before-close="modalClose"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <el-button type="primary"
                 @click="handleAdd">新 增
      </el-button>
      <element-table class="mt-20"
                     :columns="columns"
                     :data="tableData"
                     v-loading="loading">
        <template v-slot:serviceHospitalDtos="{row}">
          <p v-for="(item,index) in row.serviceHospitalDtos"
             :key="index">
            <el-tag type="danger"
                    style="margin-right:5px; margin-bottom: 5px;">
              {{ item.name }}
            </el-tag>
          </p>
        </template>


        <template v-slot:option="{row}">
          <el-button type="primary"
                     @click="handleOption('edit', row)">编辑
          </el-button>
          <el-button type="danger"
                     @click="handleOption('del', row)">删除
          </el-button>
        </template>
      </element-table>


    </el-dialog>
    <!-- vip编辑 -->
    <vipupdate-dialog :vipData="vipData"
                      v-if="showVipUpDialog"
                      :visible.sync="showVipUpDialog"/>
  </div>
</template>

<script>
import ElementTable from '@/base/ElementTable'
import vipUpdateDialog from './vipUpdateDialog'

export default {
  name: "vipDialog",
  props: {
    dataObj: {
      type: Object,
      default: {}
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      vipData: {},
      showVipUpDialog: false,

      tableData: [],
      pageTotal: 0,
      pageIndex: 1,
      pageSize: 20,
      loading: false,
      columns: [
        {
          label: '项目名称',
          prop: 'healthCheckPackage.name',
          align: "center",
          width: 200
        }, {
          label: '原价（元）',
          prop: 'healthCheckPackageItem.price',
          align: "center"
        }, {
          label: '服务医院',
          prop: 'serviceHospitalDtos',
          align: 'center',
          isSlot: true,
          width: 300

        }, {
          label: '操作',
          prop: 'option',
          align: 'center',
          isSlot: true,
          width: 200
        }
      ],
      id: '',
      ids: {compayid: '', vipid: ''}
    }
  },
  created() {
    console.log('特享', this.dataObj)
    this.id = this.dataObj.id
    this.getList()
    this.ids.compayid = this.dataObj.id
  },
  methods: {
    modalClose() {
      this.$emit('update:visible', false); // 直接修改父组件的属性
    },
    //新增
    handleAdd() {
      this.vipData = null
      this.showVipUpDialog = true
      this.ids.vipid = ''
      this.vipData = Object.assign({}, this.ids);
      this.vipData.organization = 'bclient'//机构
    },
    async handleOption(op, row) {
      switch (op) {
        case 'edit':
          this.ids.vipid = row.id
          this.vipData = Object.assign({}, this.ids);
          this.vipData.organization = 'bclient'//机构
          this.showVipUpDialog = true;
          break;
        case 'del':
          this.$confirm('是否要确认?', '提示', {
            type: 'warning'
          }).then(() => {
            this.post(this.api.company.delCompanyVipList, {
              id: row.id
            }).then((res) => {
              if (res.data.code === '200') {
                this.$message.success('删除成功')
                this.getList()
              }
            })
          })
          break;
      }
    },
    getList() {
      this.post(this.api.company.getCompanyVipList, {
        companyId: this.id
      }).then((res) => {
        if (res.data.code === '200') {
          this.tableData = res.data.object
          this.pageTotal = res.data.totalNum
        }
      })
    },

  },
  components: {
    'element-table': ElementTable,
    'vipupdate-dialog': vipUpdateDialog
  }
}
</script>

<style scoped>

</style>
